<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    nav{
        width: 100%;
        height: 50px;
        background-color: #eee;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: space-between;  
        line-height: 50px;
        position: relative;
    }
    a{
        text-decoration: none;
        color: #333;
         font-size: 14px; 
    }
    a:hover{
        color: #d4491d;
    }
    .frist{
        color: #2fb3ff;
        border-bottom: 2px solid #53B1E1;
    }
    .gengduo{
        display: block;
        width: 8px;
        height: 7px;
        background-image: url('1.png');
        /* border: 1px solid red; */
        background-position: -60px 0;
        position: relative;
        top:-27px;
        left: 40px;
    }

    /*公共  */
    .juji{
         width: 190px; 
        /* height: 218px; */
        border: 1px solid red;
        /* display: flex; */
        /* justify-content: space-around; */
        /* flex-wrap: wrap; */
        
         display: none;     
         position: absolute;
         left:-42px;
         
          
    }
     .juji li{
        width: 90px;
        height: 40px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
         display: inline-block; 
         float: left;
    } 
    .baise{
        display: block;
        width: 20px;
        height: 20px;
        /* border: 1px solid red; */
        position: absolute;
        top:-11px;
        left:85px;
        float: left;
        background-image: url(1.png);
        background-position:-110px 0;
    }
    


    .dianying{
           left:5px;  
    }

    .zongyi{
        
        left:53px;
    }
    
    .shaoer{
         left:145px;
    }
   
       .gengduode{ 
          width:100px;    
        display: inline-block;
        position: absolute; 
        left:1140px;
         margin-top: -10px; 
         display: none;  

     } 
       .gengduode li{ 
        margin-left: 30px;
    }  
     .gengduode .baise{
         /* display: block; 
        width: 20px;
        height: 20px; 
          border: 1px solid red;  
         position: absolute; */
        top:-11px;
        left:35px;
        /* float: left;
        background-image: url(1.png);
        background-position:-110px 0; */
    }  
    .xianshi a:hover .gengduo{
        
        transform: rotate(180deg);
        
    }
    .xianshi .gengduo{
        transition: all 0.3s linear;
    }
    </style>
</head>
<body>
    <nav>
        <div class="container">
            <ul>
                <li><a class="frist" href="#">首页</a></li>
                <li class="xianshi"><a href="#">剧集</a>
                    <ul class="juji">
                        <span class="baise"></span>
                        <li><a href="#" title="楚乔传TV版">楚乔传TV版</a></li>
                        <li><a href="#" title="春风十里不如你">春风十里不如你</a></li>
                        <li><a href="#" title="镇魂街 第一季">镇魂街 第一季</a></li>
                        <li><a href="#" title="我的前半生">我的前半生</a></li>
                        <li><a href="#" title="醉玲珑">醉玲珑</a></li>
                        <li><a href="#" title="微微一笑很倾城">微微一笑很倾城</a></li>
                        <li><a href="#" title="终极三国2017">终极三国2017</a></li>
                        <li><a href="#" title="龙珠传奇">龙珠传奇</a></li>
                    </ul>
                </li>
                <li class="xianshi"><a href="#">电影</a>
                <ul class="juji dianying">
                    <span class="baise"></span>
                    <li><a href="#" title="速度与激情8">速度与激情8</a></li>
                    <li><a href="#" title="人家大炮">人家大炮</a></li>
                    <li><a href="#" title="战狼">战狼</a></li>
                    <li><a href="#" title="杀破狼2">杀破狼2</a></li>
                    <li><a href="#" title="逆时营救">逆时营救</a></li>
                    <li><a href="#" title="记忆大师">记忆大师</a></li>
                    <li><a href="#" title="我的外星女友">我的外星女友</a></li>
                    <li><a href="#" title="有部电影">有部电影</a></li>
                </ul>
                </li>
                <li class="xianshi"><a href="#">综艺</a>
                <ul class="juji zongyi">
                    <span class="baise"></span>
                    <li><a href="#" title="极限挑战 第三季">极限挑战 第三季</a></li>
                    <li><a href="#" title="挑战者联盟 第三季">挑战者联盟 第三季</a></li>
                    <li><a href="#" title="脑洞大开 第一季">脑洞大开 第一季</a></li>
                    <li><a href="#" title="火星情报局 第三季">火星情报局 第三季</a></li>
                    <li><a href="#" title="暴走漫画—第五季">暴走漫画—第五季</a></li>
                    <li><a href="#" title="日日煮2017">日日煮2017</a></li>
                    <li><a href="#" title="开心俱乐部 第一季">开心俱乐部 第一季</a></li>
                    <li><a href="#" title="举杯呵呵喝2017">举杯呵呵喝2017</a></li>
                   
                </ul>
                </li>
                <li><a href="#">音乐</a></li>
                <li class="xianshi"><a href="#">少儿</a>
                <ul class="juji shaoer">
                    <span class="baise"></span>
                    <li><a href="#" title="宝狄与好友啦啦啦">宝狄与好友啦啦啦</a></li>
                    <li><a href="#" title="小猪佩奇">小猪佩奇</a></li>
                    <li><a href="#" title="纳米核心 第啦啦啦">纳米核心 第啦啦啦</a></li>
                    <li><a href="#" title="汪汪队立大啦啦啦">汪汪队立大啦啦啦</a></li>
                    <li><a href="#" title="我的汤姆猫啦啦啦">我的汤姆猫啦啦啦</a></li>
                    <li><a href="#" title="会说话的家族">会说话的家族</a></li>
                    <li><a href="#" title="小伶玩具">小伶玩具</a></li>
                    <li><a href="#" title="棉花糖和云啦啦啦">棉花糖和云啦啦啦</a></li>
                </ul>
                </li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">搞笑</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">游戏</a></li>
                <li class="xianshi"><a href="#">更多<span class="gengduo"></span></a>
                <ul class="juji gengduode">
                    <span class="baise"></span>
                    <li><a href="#" title="VR">VR</a></li>
                    <li><a href="#" title="生活">生活</a></li>
                    <li><a href="#" title="原创">原创</a></li>
                    <li><a href="#" title="排行">排行</a></li>
                </ul>
                </li>
            </ul>

        </div>
    </nav>
</body>
</html>

<script>
    var xianshi=document.querySelectorAll('.xianshi');
    var juji=document.querySelectorAll('.container .juji');

    for(var i=0;i<xianshi.length;i++){
        xianshi[i].index=i;
        xianshi[i].onmouseover=function(){
            juji.index=xianshi[this.index];
            juji[this.index].style.display='block';
        }
        xianshi[i].onmouseout=function(){
            juji.index=xianshi[this.index];
            juji[this.index].style.display='none';
        }
    }






</script>